<template>
	<view>
		<swiper :circular="true" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,i) in swiperList">
				<navigator class="swiper-item" :url="'/subpkg/good_detail/good_detail?goods_id=' + item.goods_id">
					<image :src="item.image_src" mode="false"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<view class="nav">
			<view class="goSearch">
				<view class="title">搜索入口</view>
				<view class="desc">支持通过关键字搜索</view>
				<view class="btn">去搜索</view>
			</view>
			<view class="examLine">
				<view class="title">在线考试</view>
				<view class="desc">考考你学的怎么样了</view>
				<view class="btn goBtn">去考试</view>
			</view>
		</view>
		<view class="category">
			<view class="category-title">八股文分类</view>
			<scroll-view :scroll-y="true" class="category-list">
				<uni-grid :column="3" :showBorder="false" :square="false">
					<uni-grid-item v-for="(item,index) in cateList" :index="index" :key="index">
						<view class="grid-item-box" :style="{'background-color':item.cat_bgcolor}">
							<text class="text">{{ item.cat_name }}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</scroll-view>
		</view>

	</view>
</template>
<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				swiperList: [],
			};
		},
		onLoad() {
			this.getSwiperList();
			console.log(this.device_info, this.cateList);
		},
		computed: {
			...mapGetters(['device_info', 'cateList']),
		},
		methods: {
			//轮播图数据方法
			async getSwiperList() {
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/home/swiperdata')
				// 请求失败
				if (res.meta.status !== 200) return uni.$showMsg('轮播图获取失败')
				this.swiperList = res.message
			},
		}
	}
</script>

<style lang="scss" scoped>

	swiper {
		height: 330rpx;
		width: calc(100% + #{$basePaddingLeft} * 2);
		margin-left: -$basePaddingLeft;
	}

	.swiper-item {
		padding: 0 $basePaddingLeft;
		box-sizing: border-box;
	}

	.swiper-item,
	image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.nav {
		display: flex;
		margin-top: $baseMarginTop;
		color: #FEFFFF;

		&>view {
			flex: 1;
			padding: 30rpx 30rpx;
			border-radius: 20rpx;
		}

		.goSearch {
			background-color: #6569D1;
			margin-right: $basePaddingLeft;
		}

		.examLine {
			background-color: #AE78DD;

			.goBtn {
				background-color: #8B5AC4;
			}
		}

		.title {
			font-size: 34rpx;
		}

		.desc {
			font-size: 24rpx;
			margin: 4rpx 0 12rpx 0;
		}

		.btn {
			font-size: 24rpx;
			display: inline;
			padding: 6rpx $basePaddingLeft;
			border-radius: 16rpx;
			background-color: #8692EE;
		}
	}

	.category {
		margin-top: $baseMarginTop;

		.category-title {
			padding-bottom: $baseMarginTop;
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #041C3C;
		}

		.category-list {}

		uni-grid-item {
			width: 33.33%;
			box-sizing: border-box;
			padding-right: calc(#{$basePaddingLeft / 2});
			margin-bottom:calc(#{$basePaddingLeft / 2});

			&:nth-child(3n+3) {
				padding-right: 0;
			}

			/deep/ .uni-grid-item {
				width: 100% !important;
			}
		}

		.grid-item-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 60rpx 0;
			border-radius: 14rpx;
			color: #fff;
		}
	}
</style>
